<template>

  <div style="">
    <van-nav-bar title="充电中" left-text="返回" left-arrow @click-left="onClickLeft" />
  </div>

  <div style="margin-top: 40px;text-align: center;">
    <van-cell-group inset>
      <van-field label="总功率" :model-value="chargingRate" readonly />
      <van-field label="总费用" :model-value="priceNum" readonly />
    </van-cell-group>
  </div>
  <div class="foot-div">
    <span><van-button round type="success" size="normal" @click="startCharging()">去支付</van-button></span>
  </div>

</template>
<script setup>
import { ref } from 'vue';
import router from '@/router'
const onClickLeft = () => history.back();
import { useRoute } from 'vue-router';

const route = useRoute();

// 从路由中获取参数
const id = ref(route.query.id);
const price = ref(route.query.price);
const chargingRateEnd = ref(route.query.chargingRateEnd);
const chargingRateStart = ref(route.query.chargingRateStart);
const vehicleIdentifyNo=ref(route.query.vehicleIdentifyNo);
const priceNum=ref(0)
const chargingRate=ref(0)
function getPrice(){
  priceNum.value= (price.value*(chargingRateEnd.value-chargingRateStart.value)).toFixed(2);
  chargingRate.value=(chargingRateEnd.value-chargingRateStart.value).toFixed(2)
}
getPrice()
console.log(id.value);

console.log(price.value);
console.log(chargingRateEnd.value);
console.log(chargingRateStart.value);
console.log(vehicleIdentifyNo.value);

var chargeRecordId=ref('')
var chargingMoney=ref('')

init();

function init(){
  //请求后台获取对应的数据
  chargeRecordId.value=100001;
  chargingMoney.value=priceNum.value;
}

function startCharging() {
  router.push({path:'/user/charge/ChargePayMoney',
    query:{id:id.value,amount:chargingMoney.value,vehicleIdentifyNo:vehicleIdentifyNo.value}})
}

</script>
<style>
.main-div {
  margin: 8px;
  height: 65px;
  width: auto;
  display: flex;
  border-radius: 2%;
  background-color: gray;
}

image {
  border-width: 0px;
  position: absolute;
  left: 0px;
  top: 0px;
}

.foot-div {
  margin-top: 100px;
  text-align: center;
}
</style>